import React from 'react';
import {BrowserRouter, Route, Link} from 'react-router-dom'
import FluxVideo from './video/video1';
import VuexVideo from './video/video2';
import VueRouterVideo from './video/video3';

class ReactRouterTest extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            id: '',
            list: [
                {name: '跑步五公里', id: 123},
                {name: '代码写两千行', id: 456},
                {name: '学习React源码', id: 789},
            ]
        }
    }

    render(){
        return (
            <div>
                <h3>实现点击查看详情效果（替换当前路由组件）</h3>
                <ul>
                    {
                        this.state.list.map(item => {
                            return (
                                <li key={item.name}><Link to={'/listDetail/' + item.id}>{item.name}:查看详情数据</Link></li>
                            )
                        })
                    }
                </ul>
                <BrowserRouter>
                    <h3>实现三级菜单联动效果（路由嵌套）</h3>
                    <p className="color-red">注意：子路由一定是以父组件路由地址/reactRouter开头否则刷新浏览器导致路由匹配不到</p>
                    <Link to='/reactRouter/video/fluxvideo'>flux视频；</Link>
                    <Link to='/reactRouter/video/vuexvideo'>vuex视频;</Link>
                    <Link to='/reactRouter/video/vueroutervideo'>vuerouter视频;</Link>
                    
                    <div style={{border: '1px solid #333'}}>
                        <Route path='/reactRouter/video/fluxvideo' component={FluxVideo}></Route>
                        <Route path='/reactRouter/video/vuexvideo' component={VuexVideo}></Route>
                        <Route path='/reactRouter/video/vueroutervideo' component={VueRouterVideo}></Route>
                    </div>
                </BrowserRouter>

                




            </div>
        )
    }
}

export default ReactRouterTest
